<template>
    <view class="container">
        <u-input
            :placeholder="'请输入验证码'"
            border="none"
            fontSize="28rpx"
            color="#000000"
            v-model="formData.code"
            :customStyle="{
                margin: '20rpx 0 0 0',
                padding: '30rpx 15rpx',
                background: '#FFFFFF',
                fontWeight: 400
            }"
        >
            <template slot="suffix">
                <u-code
                    ref="uCode"
                    @change="codeChange"
                    changeText="重新发送(Xs)"
                    keep-running
                    @end="end"
                ></u-code>
                <view
                    class="code-btn"
                    @click="getCode"
                    :class="disenble? 'code-btn-disble': null"
                >{{tips}}</view>
                <!--u-text
                    :text="tips"
                    @click="getCode"
                    size="24rpx"
                    :color="disenble? '#9DA1AD':'#27334E'"
                >
                </u-text-->
            </template>
        </u-input>
        <u-line color="#EEEEEE"></u-line>
        <u-input
            :placeholder="'请设置交易密码'"
            border="none"
            fontSize="28rpx"
            color="#000000"
            v-model="formData.safePass"
            :customStyle="{
                margin: '20rpx 0 0 0',
                padding: '30rpx 15rpx',
                background: '#FFFFFF',
                fontWeight: 400
            }"
            type="password"
        >
        </u-input>
        <u-line color="#EEEEEE"></u-line>
        <u-input
            :placeholder="'请确认交易密码'"
            border="none"
            fontSize="28rpx"
            color="#000000"
            v-model="formData.password"
            :customStyle="{
                margin: '20rpx 0 0 0',
                padding: '30rpx 15rpx',
                background: '#FFFFFF',
                fontWeight: 400
            }"
            type="password"
        >
        </u-input>
        <u-line color="#EEEEEE"></u-line>
        <view class="bottom">
            <u-button
                :customStyle="{
                    height: '90rpx',
                    background: '#000000',
                    color: '#ffffff',
                    fontSize: '60px'
                }"
                :throttleTime="1500"
                text="确认"
                @click="onsubmit"
                :disabled="btnDisabled"
            >
            </u-button>
        </view>
        <u-popup
            :show="popupShow"
            mode="center"
            @close="popupShow = false"
            :customStyle="{
                width: '620rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                :p_type="'verifyCode'"
                @confirm="captchaConfirm"
                :extData="extData"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import { setSafePass } from "@/config/api-java"
    import PopupContext from "@/components/PopupContext"
    export default {
        name: "setPassword",
        components: {
            PopupContext
        },
        data() {
            return {
                formData: {
                    code: null,
                    safePass: null,
                    password: null
                },
                tips: "发送验证码",
                disenble: false,
                popupShow: false,
                extData: null
            }
        },
        computed: {
            btnDisabled() {
                if (this.formData.code) {
                    if (!this.formData.safePass) {
                        return true
                    }
                    return this.formData.safePass !== this.formData.password
                } else {
                    return true
                }
            }
        },
        methods: {
            async getCode() {
                if (this.disenble) {
                    return
                }
                this.extData = {
                    mobile: this.$store.getters.mobile
                }
                this.popupShow = true
            },
            captchaConfirm() {
                this.$refs.uCode.start();
                this.disenble = true
                this.popupShow = false
                this.$u.toast('验证码获取成功')
            },
            end() {
                this.disenble = false
            },
            codeChange(text) {
                this.tips = text
            },
            async onsubmit() {
                const res = await setSafePass(this.formData)
                this.$u.toast('交易密码设置成功');
                this.$store.dispatch("user/setSafePass", true)
                setTimeout(() => {
                    this.$u.route({
                        type: 'navigateBack'
                    })
                }, 1500)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 30rpx 26rpx 0 26rpx;
        .code-btn {
            box-sizing: border-box;
            width: 180rpx;
            height: 56rpx;
            border-radius: 2px;
            border: 1px solid #000000;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            text-align: center;
            line-height: 56rpx;
        }
        .code-btn-disble {
            color: #9DA1AD;
            border: 1px solid #9DA1AD;
        }
        .bottom {
            background: #ffffff;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20rpx 26rpx calc(var(--window-bottom) + 30rpx) 26rpx;
            ::v-deep .u-button__text {
                font-size: 30rpx !important;
            }
        }
    }
</style>
